<template>
    <div class="page-container">
        <div class="page-layout">
            <div class="page-layout-header">
                <div class="header-aside flex-start-title">
                    <div class="title">{{ operated.header.aside }}</div>
                    <div class="option" v-if="!operated.tree.viewer">
                        <div class="icon" :title="$t('components.page.tree.create-root')" @click="$refs.tree.dialogNodeOption('create-root')">
                            <i class="el-icon-plus"></i>
                        </div>
                    </div>
                </div>
                <div class="header-main">
                    <slot name="header-main">
                        <div class="title">{{ operated.header.main }}</div>
                    </slot>
                </div>
            </div>
            <div class="page-layout-body">
                <div class="body-aside">
                    <!--目录树-->
                    <menu-tree ref="tree" :operated="operated" @click="treeSelectNode"></menu-tree>
                </div>
                <div class="body-main">
                    <vue-simplebar>
                        <slot v-bind:tree="tree"></slot>
                    </vue-simplebar>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import MenuTree from './Tree.vue'

export default {
    name: "PageTree",
    props: ['operate'],
    components: {
        MenuTree,
    },
    data() {
        return {
            tree: {},
            operated: {
                header: {
                    aside: this.$t('components.page.tree.header.aside'),
                    main: this.$t('components.page.tree.header.main'),
                },
                action: {
                    getTreeList: '',
                    treeNodeCreate: '',
                    treeNodeUpdate: '',
                    treeNodeDestroy: '',
                },
                tree: {
                    nodeIcon: '',
                    indent: 18,
                    defaultExpandAll: false,
                    defaultExpandFirstLevel: false,
                    viewer: true,
                },
            },
        }
    },
    watch: {
        operate: {
            deep: true,
            immediate: true,
            handler: function (n, o) {
                if (!this.operate) {
                    return
                }
                if (this.operate.header != null) {
                    if (this.operate.header.aside != null) {
                        this.operated.header.aside = this.operate.header.aside
                    }
                    if (this.operate.header.main != null) {
                        this.operated.header.main = this.operate.header.main
                    }
                }
                if (this.operate.action != null) {
                    if (this.operate.action.getTreeList != null) {
                        this.operated.action.getTreeList = this.operate.action.getTreeList
                    }
                    if (this.operate.action.treeNodeCreate != null) {
                        this.operated.action.treeNodeCreate = this.operate.action.treeNodeCreate
                    }
                    if (this.operate.action.treeNodeUpdate != null) {
                        this.operated.action.treeNodeUpdate = this.operate.action.treeNodeUpdate
                    }
                    if (this.operate.action.treeNodeDestroy != null) {
                        this.operated.action.treeNodeDestroy = this.operate.action.treeNodeDestroy
                    }
                }
                if (this.operate.tree != null) {
                    if (this.operate.tree.nodeIcon != null) {
                        this.operated.tree.nodeIcon = this.operate.tree.nodeIcon
                    }
                    if (this.operate.tree.indent != null) {
                        this.operated.tree.indent = this.operate.tree.indent
                    }
                    if (this.operate.tree.defaultExpandAll != null) {
                        this.operated.tree.defaultExpandAll = this.operate.tree.defaultExpandAll
                    }
                    if (this.operate.tree.defaultExpandFirstLevel != null) {
                        this.operated.tree.defaultExpandFirstLevel = this.operate.tree.defaultExpandFirstLevel
                    }
                    if (this.operate.tree.viewer != null) {
                        this.operated.tree.viewer = this.operate.tree.viewer
                    }
                }
            },
        }
    },
    methods: {
        treeSelectNode(data) {
            // 对外广播事件
            if (this.tree.id != data.id) {
                this.$emit('change', data);
            }
            // 对外广播事件
            this.$emit('click', data);
            // 缓存数据
            this.tree = data;
        },
    }
}
</script>

<style lang="scss" scoped>
.header-aside .icon {
    flex-shrink: 0;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    color: $font-color-third;
}

.header-aside .icon:hover {
    color: $font-color-second;
}
</style>
